<template>
  <div>
    <el-dialog title="会员卡包设置" :visible.sync="dialogFormVisible" :before-close="cancal" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules">
        <!-- <el-form-item label="会员卡类型" :label-width="formLabelWidth" style="width: 400px;" prop="type">
          <el-select v-model="formInline.selectValue" @change="onSelect">
            <el-option label="自助洗车会员卡" :value="0" />
            <el-option label="自动洗车会员卡" :value="1" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="会员卡包名" :label-width="formLabelWidth" style="width: 400px;" prop="name">
          <el-input v-model="form.name" :label-width="formLabelWidth" />
        </el-form-item>
        <el-form-item label="包含类型" :label-width="formLabelWidth" prop="tag">
          <el-tag
            v-for="item in tag"
            :key="item.id"
            v-model="form.tag"
            style="margin-right: 10px;"
            class="inactive"
            :class="{ active: arr.includes(item.id) }"
            effect="plain"
            @click="changeTag(item.id)"
          >{{ item.text }}
          </el-tag>
        </el-form-item>
        <el-form-item v-if="arr.includes(4)" label="充值系列" :label-width="formLabelWidth" prop="cz">
          <div class="flex flex-wrap-w">
            <ul class="flex flex-wrap-w">
              <li v-for="(item, index) in cardListEdit[4]" :key="index" class="series" :style="{'border':item.id===id?'1px solid rgb(255, 187, 94)':'1px solid rgb(214, 214, 214)'}">
                <div class="edit flex flex-jc-sa">
                  <div style="color: #fff;font-size: 20px;" @click="edit(item, 0, 4,index)">
                    <i class="el-icon-edit-outline" />
                  </div>
                  <div style="color: #fff;font-size: 20px;" @click="del(item.id, index, 4)">
                    <i class="el-icon-delete" />
                  </div>
                </div>
                <div
                  class="series-text"
                  :class="[
                    item.free_Cost === 0
                      ? 'series-set'
                      : 'flex flex-dir-c flex-ai-c'
                  ]"
                >
                  <div style="font-size: 12px;">
                    {{ item.coupon_Name | cutString(15) }}
                  </div>
                  <div v-if="item.free_Cost">(送{{ item.free_Cost }}元)</div>
                </div>
              </li>
              <div><img :src="btnImg" class="btnImg" @click="add(4)"></div>
            </ul>
          </div>
        </el-form-item>
        <el-form-item v-if="arr.includes(1)" label="月卡系列" :label-width="formLabelWidth" prop="yk">
          <div class="flex flex-wrap-w">
            <ul class="flex flex-wrap-w">
              <li v-for="(item, index) in cardListEdit[1]" :key="index" class="series flex flex-ai-c flex-jc-c" :style="{'border':item.coupon_Name===id?'1px solid rgb(255, 187, 94)':'1px solid rgb(214, 214, 214)'}">
                <div class="edit flex flex-jc-sa">
                  <div style="color: #fff;font-size: 20px;" @click="edit(item, 0, 1,index)">
                    <i class="el-icon-edit-outline" />
                  </div>
                  <div style="color: #fff;font-size: 20px;" @click="del(item.id, index, 1)">
                    <i class="el-icon-delete" />
                  </div>
                </div>
                <div style="font-size: 12px;" class="series-text">
                  {{ item.coupon_Name | cutString(15) }}
                </div>
              </li>

              <!-- <li v-show="isTag" class="series" style="border: 1px solid rgb(255, 187, 94);" /> -->

              <div><img :src="btnImg" class="btnImg" @click="add(1)"></div>
            </ul>
          </div>
        </el-form-item>
        <el-form-item v-if="arr.includes(2)" label="次卡系列" :label-width="formLabelWidth" prop="ck">
          <div class="flex flex-wrap-w">
            <ul class="flex flex-wrap-w">
              <li v-for="(item, index) in cardListEdit[2]" :key="index" class="series flex flex-jc-c flex-ai-c" :style="{'border':item.coupon_Name===id?'1px solid rgb(255, 187, 94)':'1px solid rgb(214, 214, 214)'}">
                <div class="edit flex flex-jc-sa">
                  <div style="color: #fff;font-size: 20px;" @click="edit(item, 0, 2,index)">
                    <i class="el-icon-edit-outline" />
                  </div>
                  <div style="color: #fff;font-size: 20px;" @click="del(item.id, index, 2)">
                    <i class="el-icon-delete" />
                  </div>
                </div>
                <div style="font-size: 12px;" class="series-text">
                  {{ item.coupon_Name | cutString(15) }}
                </div>
              </li>

              <!-- <li v-show="isTag" class="series" style="border: 1px solid rgb(255, 187, 94);" /> -->

              <div><img :src="btnImg" class="btnImg" @click="add(2)"></div>
            </ul>
          </div>
        </el-form-item>
        <el-form-item v-if="arr.includes(3)" label="计时系列" :label-width="formLabelWidth" prop="js">
          <div class="flex flex-wrap-w">
            <ul class="flex flex-wrap-w">
              <li v-for="(item, index) in cardListEdit[3]" :key="index" class="series flex flex-jc-c flex-ai-c" :style="{'border':item.coupon_Name===id?'1px solid rgb(255, 187, 94)':'1px solid rgb(214, 214, 214)'}">
                <div class="edit flex flex-jc-sa">
                  <div style="color: #fff;font-size: 20px;" @click="edit(item, 0, 3,index)">
                    <i class="el-icon-edit-outline" />
                  </div>
                  <div style="color: #fff;font-size: 20px;" @click="del(item.id, index, 3)">
                    <i class="el-icon-delete" />
                  </div>
                </div>
                <div class="series-text">
                  {{ item.coupon_Name | cutString(15) }}
                </div>
              </li>

              <!-- <li v-show="isTag" class="series" style="border: 1px solid rgb(255, 187, 94);" /> -->

              <div><img :src="btnImg" class="btnImg" @click="add(3)"></div>
            </ul>
          </div>
        </el-form-item>
        <slot name="add" />
        <!-- 嵌套模态 -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancal">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FormModel',
  filters: {
    cutString(str, len) {
      if (str.length * 2 <= len) {
        return str
      }
      let strlen = 0
      let s = ''
      for (let i = 0; i < str.length; i++) {
        s = s + str.charAt(i)
        if (str.charCodeAt(i) > 128) {
          strlen = strlen + 2
          if (strlen >= len) {
            return s.substring(0, s.length - 1) + '...'
          }
        } else {
          strlen = strlen + 1
          if (strlen >= len) {
            return s.substring(0, s.length - 2) + '...'
          }
        }
      }
      return s
    }
  },
  model: {
    prop: 'dialogFormVisible'
  },
  props: {
    rules: {
      type: Object,
      default: () => {}
    },
    form: {
      type: Object,
      default: () => {}
    },
    /* isAddModel: {
      type: Boolean,
      default: false
    }, */
    id: {
      type: String,
      default: ''
    },
    arr: {
      type: Array,
      default: () => []
    },
    // input宽度
    formLabelWidth: {
      type: String,
      default: ''
    },
    // 是否显示
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    // tag列表
    tag: {
      type: Array,
      default: () => []
    },
    // 多个会员卡列表
    cardListEdit: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formInline: {
        selectValue: 0,
        searchKey: '' // 会员卡搜索值
      },
      // 默认图
      btnImg: ''
    }
  },
  methods: {
    changeTag(id) {
      this.$emit('changeTag', id)
    },
    del(row, index, type) {
      this.$emit('del', row, index, type)
    },
    edit(item, type, cardType, index) {
      this.$emit('edit', item, type, cardType, index)
    },
    // 添加
    add(type) {
      this.$emit('add', type)
    },
    // 确定
    determine() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$emit('determine')
          this.$refs['form'].clearValidate()
        } else {
          return false
        }
      })
    },
    // 取消
    cancal() {
      this.$emit('cancal')
      this.$refs['form'].clearValidate()
    }
  }
}
</script>

<style scoped>
  ul>li {
    list-style: none;
  }
  .btnImg {
    width: 120px;
    height: 70px;
    margin-top: 10px;
  }
  .inactive {
    border: 1px solid rgb(192, 192, 192);
    color: rgb(192, 192, 192);
  }
  .active {
    border: 1px solid rgb(255, 187, 94) !important;
    color: rgb(255, 187, 94) !important;
  }
  .series {
    position: relative;
    margin-right: 10px;
    margin-top: 10px;
    border: 1px solid rgb(214, 214, 214);
    /* padding: 20px 50px; */
    width: 120px;
    height: 70px;
    transition: all 0.2s;
  }

  .series:hover {
    /* border: 1px solid rgb(255, 187, 94); */
    background-color: rgb(195, 195, 195);
  }

  .series:hover .series-text {
    visibility: hidden;
  }

  .edit {
    position: absolute;
    line-height: 70px;
    top: 0;
    visibility: hidden;
    width: 100%;
  }

  .series:hover .edit {
    visibility: visible;
    color: #000000;
  }

  .series-set {
    line-height: 70px;
    text-align: center;
  }

</style>
